<template>
  <div class="image-container">
    <img :src="currentImage" :style="imageStyle" @click="toggleZoom" />
    <button @click="prevImage">上一张</button>
    <button @click="nextImage">下一张</button>
    <button @click="rotateLeft">向左旋转</button>
    <button @click="rotateRight">向右旋转</button>
  </div>
</template>

<script>
	export default {
	  data() {
	    return {
	      images: [
	        require('../../assets/image/cardmodle.jpg'),
	        require('../../assets/image/card.jpg')
	        // 更多图片路径
	      ],
	      currentIndex: 0,
	      zoomLevel: 1,
	      angle: 0
	    };
	  },
	  computed: {
	    imageStyle() {
	      return {
	        transform: `scale(${this.zoomLevel}) rotate(${this.angle}deg)`,
	        transition: 'transform 0.5s ease'
	      };
	    },
	    currentImage() {
	      return this.images[this.currentIndex];
	    }
	  },
	  methods: {
	    toggleZoom() {
	      this.zoomLevel = this.zoomLevel === 1 ? 2 : 1; // 放大到2倍，然后缩小回1倍
	    },
	    rotateLeft() {
	      this.angle -= 90; // 向左旋转90度
	    },
	    rotateRight() {
	      this.angle += 90; // 向右旋转90度
	    },
	    nextImage() {
	      this.currentIndex = (this.currentIndex + 1) % this.images.length;
	    },
	    prevImage() {
	      this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
	    }
	  }
	  // 其他选项...
	}
</script>

<style scoped>
.image-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-container img {
  max-width: 100%;
  max-height: 100%;
  cursor: pointer;
}

button {
  margin: 10px;
}
</style>